<template>
  <el-dialog
    title="添加个人标注"
    :visible.sync="showVisible"
    :before-close="closeDialog"
    class="list-dialog"
  >
    <el-form
      :model="ruleForm"
      ref="bzRuleForm"
      label-width="112px"
      class="list-ruleForm"
    >
      <el-form-item label="标注所在位置：">
        <el-select v-model="ruleForm.biaozhuwzid" placeholder="请选择">
          <el-option
            class="list-select"
            v-for="item in positionList"
            :key="item.biaozhuwzid"
            :label="item.biaozhuwzmc"
            :value="item.biaozhuwzid"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="自定义分类：">
        <el-select v-model="ruleForm.biaozhuflid" placeholder="请选择">
          <el-option
            class="list-select"
            v-for="item in ThemeList"
            :key="item.biaozhuflid"
            :label="item.biaozhuflmc"
            :value="item.biaozhuflid"
          >
          </el-option>
        </el-select>
        <el-button
          type="text"
          class="list-ruleForm-add"
          @click="markInnerVisible = true"
          >+新建</el-button
        >
      </el-form-item>
      <el-form-item label="我的批注：">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="ruleForm.biaozhunr"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <el-dialog
      width="40%"
      title="新建标注分类"
      :visible.sync="markInnerVisible"
      append-to-body
    >
      <el-form
        :model="addRuleForm"
        ref="bzForm"
        label-width="84px"
        class="list-ruleForm"
      >
        <el-form-item label="分类名称：">
          <el-input
            v-model="addRuleForm.biaozhuflmc"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="addRuleForm.beizhu"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <el-button
        @click="
          addRuleForm = {};
          markInnerVisible = false;
        "
        >取 消</el-button
      >
      <el-button type="primary" @click="saveTheme()">确 定</el-button>
    </el-dialog>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="save()">提 交</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  getMarkingPositionList,
  getCustomThemeList,
  addPersonalLables,
  createClassifiedTopics
} from "@api/personalLables/index";
export default {
  name: "markOuter",
  props: {
    showVisible: {
      type: Boolean,
      required: true
    },
    parentInfo:{
      type: Array
    }
  },
  data() {
    return {
      markInnerVisible: false,
      positionList: [], // 标注所在位置
      ThemeList: [], //分类
      ruleForm: {}, // 添加个人标注
      addRuleForm: {} // 新建标注分类
    };
  },
  created() {
    this.getMarkingPositionList();
    this.getCustomThemeList();
  },
  methods: {
    // 获取标注位置列表
    async getMarkingPositionList() {
      const { code, data } = await getMarkingPositionList();
      console.log(code);
      console.log(data);
      this.positionList = data;
    },
    // 获取自定义主题表
    async getCustomThemeList() {
      const { code, data } = await getCustomThemeList();
      console.log(code);
      console.log(data);
      this.ThemeList = data;
    },
    // 添加个人标注
    async save() {
      console.log(this.parentInfo)
      this.ruleForm.biaozhuList= this.parentInfo
        const { code, msg } = await addPersonalLables(this.ruleForm);
        if (code == 200) {
            console.log(this)
            this.closeDialog();
            this.$message.success("添加成功！");
        }
    },
    // 关闭个人标注
    closeDialog() {
      this.ruleForm = {};
      this.$emit("update:showVisible", false);
    },
    // 添加分类
    async saveTheme() {
      const { code, msg } = await createClassifiedTopics(this.addRuleForm);
      if (code == 200) {
        this.addRuleForm = {};
        this.markInnerVisible = false;
        this.$message.success("添加成功！");
        this.getCustomThemeList();
      }
    }
  }
};
</script>
